<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	
	<div>
		<label for="uname">用户名</label>
		<input id="uname" type="text" name="uname">
		<br>
		<label>
				<span>手机号</span>
				<input type="text" value="13299880077" name="phone">
		</label>
		<br>
		<input type="password" placeholder="请输入密码">
		
		<br>
		<span>性别</span>
		<label>
				<input name="sex" type="radio" value="男">男
		</label>
		<label>
				<input name="sex" checked type="radio" value="女">女
		</label>
		<label>
				<input name="sex" type="radio" value="未知">未知
		</label>
		<br>
		<span>爱好</span>
		<label>
				<input type="checkbox">写代码
		</label>
		<label>
				<input checked="checked" type="checkbox">篮球
		</label>
		<label>
				<input type="checkbox">足球
		</label>
		<label>
				<input type="checkbox">游泳
		</label>
		<br>
		<label>
				<span>城市</span>
				<select>
						<option>&#45;&#45;&#45;&#45;</option>
						<option>西安</option>
						<option selected="selected">宝鸡</option>
						<option>渭南</option>
						<option>汉中</option>
						<option>咸阳</option>
				</select>
		</label>
		<br>
		<label>
				<span>签名</span>
				<textarea></textarea>
		</label>
		<br>
		<!-- <input type="submit" value="保存提交"> -->
		<!-- <input type="button" value="确认提交"> -->
		<button>提交</button>
	</div>
	
	
	<!-- 
	v-model 语法糖
	它负责监听用户的输入事件以更新数据
	为不同的输入元素使用不同的 property 并抛出不同的事件：
	- text 和 textarea 元素使用 value property 和 input 事件；
	- checkbox 和 radio 使用 checked property 和 change 事件；
	- select 字段将 value 作为 prop 并将 change 作为事件。
	
	.number、.lazy、.trim
	 -->
	<div id="app">
		<h1>{{ msg }}</h1>
		<hr>
		<span>单行文本输入：</span>
		<input type="text" v-model="msg"><br>
		<!-- input -> change -->
		<input type="text" v-model.lazy="msg"><br>
		<input type="text" v-model.trim="msg"><br>
		<br>
		<span>多行文本：</span>
		<textarea v-model="multipleMsg"></textarea>
		<div style="white-space: pre-line;">multipleMsg: {{ multipleMsg }}</div>
		<span>复选框：</span>
		<input type="checkbox" v-model="isChecked">
		<div>isChecked: {{ isChecked }}</div>
		<span>多复选框：</span>
		<input type="checkbox" v-model="aihao" value="游泳">游泳
		<input type="checkbox" v-model="aihao" value="足球">足球
		<input type="checkbox" v-model="aihao" value="太极">太极
		<input type="checkbox" v-model="aihao" value="滑雪">滑雪
		<div>aihao: {{ aihao }}</div>
		<span>单选按钮:</span>
		<input type="radio" v-model="sex" value="1">男
		<input type="radio" v-model="sex" value="2">女
		<input type="radio" v-model="sex" value="3">未知
		<div>sex: {{sex}}</div>
		<span>选择框:</span>
		<select v-model="address">
			<option value="" disabled>----</option>
			<option value="10">西安</option>
			<option value="11">宝鸡</option>
			<option value="12">咸阳</option>
			<option value="13">渭南</option>
		</select>
		<div>address: {{address}}</div>
	</div>
	
	<script src="vue.js"></script>
	<script>
		
		const app = new Vue({
			data: {
				msg: "Hello Vue: Form！",
				multipleMsg: "",
				isChecked: true,
				aihao: ["足球"],
				sex: "",
				address: ""
			},
			methods: {
				
			},
		}).$mount("#app")
	</script>
</body>
</html>